<template>
	<div class="content cut-drawer">
		<view class="cut-column">
			<view class="item" v-for="(item,index) in KEMULIST" :key="index" 
			:class="{'childer': item.s.length>0,'on': index==keMuIndex[0]}"
			@click="itemClick(index)">
				<view class="text">{{item.v}}</view>
				<view class="right">
					<view v-if="item.s.length==0" class="iconfont icon-duigou"></view>
					<template v-else>
						<view>共{{$common.numberToChinese(item.s.length)}}科</view>
						<view class="iconfont icon-fanhui base-fanhui"></view>
					</template>
				</view>
			</view>
			<view class="item" @click="modalShow=1">
				<view class="text">注销</view>
				<view class="right">
					<view class="iconfont icon-fanhui base-fanhui"></view>
				</view>
			</view>
		</view>
		<view v-if="KEMULIST[keMuIndex[0]]?.s" class="childer-cut-column">
			<view class="item" v-for="(item,index) in KEMULIST[keMuIndex[0]].s" :key="index" 
			:class="{'on': index==keMuIndex[1]}"
			@click="childerClick(index)">
				<view class="text">{{item.n}}</view>
				<view class="right">
					<view class="iconfont icon-duigou"></view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<button class="btn" @click="confirm">确定</button>
		</view>
		
		<div v-if="modalShow==1" class="ai-modal">
			<div class="shadow"></div>
			<div class="modal-content">
				<div class="close-btn" @click="modalShow=-1"></div>
				<div class="title">注销确认</div>
				<div class="text">确定注销，永久删除账号、个人资料及使用数据，且无法恢复，请谨慎操作。</div>
				<div class="btn" @click="modalShow=2">确定</div>
			</div>
		</div>
		<div v-else-if="modalShow==2" class="ai-modal">
			<div class="shadow"></div>
			<div class="modal-content">
				<div class="close-btn" @click="modalShow=-1"></div>
				<div class="title">注销确定</div>
				<input class="input" v-model="canceInfo" type="text" placeholder="请输入“注销”后确定"/>
				<div class="btn" @click="cancelUser">确定</div>
			</div>
		</div>
		<div v-else-if="modalShow==3" class="ai-modal">
			<div class="shadow"></div>
			<div class="modal-content">
				<div class="title">注销确定</div>
				<div class="text success">注销成功</div>
				<div class="btn">确定</div>
			</div>
		</div>
		
	</div>
</template>

<script>
import {closeAccount} from '@/api/index.js'
export default {
	data() {
		return {
			keMuIndex: [],
			modalShow: -1,
			canceInfo: '',
		}
	},
	watch: {
		'$store.state.keMuIndex':{
			handler(newVal){
				this.$store.dispatch('getDeptByKeMu');
			},
			deep: true
		}
	},
	computed: {
		KEMULIST() {
			return this.$store.state.KEMULIST;
		},
	},
	mounted(){
		this.setMu()
	},
	methods: {
		cancelUser(){
			if(this.canceInfo.trim()!='注销'){
				return uni.showToast({ title: '请输入“注销”后确定', icon: 'none' })
			}
			closeAccount().then(res=>{
				this.modalShow=3;
				setTimeout(()=>{
					uni.reLaunch({ url: '/pagesB/login/login' })
				},1000)
			})
		},
		setMu(){
			this.keMuIndex=this.$store.state.keMuIndex;
		},
		confirm(){
			console.log(this.KEMULIST,'----61')
			if(this.$common.isEmpty(this.keMuIndex)){
				return uni.showToast({ title: '请选择科目', icon: 'none' })
			}
			if(this.KEMULIST[this.keMuIndex[0]]?.s.length>0 && this.keMuIndex.length!=2){
				return uni.showToast({ title: '请选择亚科目', icon: 'none' })
			}
			this.$store.commit('set', ['keMuIndex',this.keMuIndex]);
			uni.setStorageSync('keMuIndex',this.keMuIndex);
			
			const pages = getCurrentPages();
			if (pages.length === 1 && pages[0]?.route=='pages/cutDrawer/index') {
			    uni.switchTab({
			        url: '/pages/index/index'
			    })
			}else{
				uni.navigateBack({
				  delta: 1
				})
			}
		},
		itemClick(index){
			this.keMuIndex=[index]
		},
		childerClick(index){
			this.keMuIndex[1]=index
		}
	}
};
</script>

<style scoped lang="scss">
	.content{
		display: flex;
		justify-content: space-between;
		min-height: 100vh;
		padding-right: 16rpx;
		background-color: #F5F5F5;
	}
	.icon-duigou{
		font-size: 18rpx;
		color: #EAEAEA;
	}
	.cut-column,.childer-cut-column{
		color: #1E1E1E;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			border: 2rpx solid #EAEAEA;
			border-radius: 12rpx;
			&.on{
				background-color: #FFEBD1;
				border-color: #FF9813;
				&.on,.icon-duigou{
					color: #FF9813;
				}
			}
		}
		.text{
			font-size: 28rpx;
		}
	}
	.cut-column{
		width: 488rpx;
		padding: 20rpx 16rpx 0 36rpx;
		background-color: #fff;
		.item{
			padding: 0 34rpx 0 24rpx;
			&.childer{
				background-color: #fff;
				.right{
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #808080;
				}
				.icon-fanhui{
					margin-left: 10rpx;
					font-size: 15rpx;
				}
				&.on{
					.right{
						color: #FF9813;
					}
				}
			}
		}
	}
	.childer-cut-column{
		width: 230rpx;
		padding-top: 20rpx;
		.item{
			padding: 0 22rpx 0 32rpx;
		}
		.text{
			font-size: 24rpx;
		}
	}
	.bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 170rpx;
		background-color: #fff;
		.btn{
			width: 400rpx;
			height: 86rpx;
			border-radius: 44rpx;
			background-color: #FCBE6F;
			font-size: 34rpx;
			font-weight: 600;
			color: #fff;
			&::after{
				border: none;
			}
		}
	}
	.ai-modal{
		position: fixed;
		z-index: 111111;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ai-modal{
		&,.shadow{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.shadow{
			position: absolute;
			background-color: rgba(0,0,0,.65);
		}
		.modal-content{
			position: relative;
			z-index: 1;
			width: 562rpx;
			padding: 40rpx 34rpx 30rpx;
			text-align: center;
			border-radius: 20rpx;
			background-color: #fff;
		}
		.close-btn,.btn{
			cursor: pointer;
		}
		.close-btn{
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			width: 32rpx;
			height: 32rpx;
			&::before,&::after{
				content: "";
				position: absolute;
				width: 32rpx;
				height: 3rpx;
				background-color: #ccc;
			}
			&::before{
				transform: rotate(45deg);
			}
			&::after{
				transform: rotate(-45deg);
			}
		}
		.title{
			margin-bottom: 38rpx;
			color: #333;
			font-size: 38rpx;
			font-weight: 600;
		}
		.text{
			margin-bottom: 34rpx;
			line-height: 40rpx;
			color: #808080;
			font-size: 24rpx;
			&.success{
				color: #FCBE6F;
			}
		}
		.btn{
			height: 72rpx;
			line-height: 72rpx;
			background-color: #FCBE6F;
			font-size: 34rpx;
			font-weight: bold;
			color: #fff;
			border-radius: 44rpx;
		}
		.input{
			width: 394rpx;
			height: 64rpx;
			margin: 34rpx auto 66rpx;
			padding: 0 12rpx;
			text-align: left;
			border-radius: 6rpx;
			font-size: 24rpx;
			color: #808080;
			border: 2rpx solid #EAEAEA;
		}
		.input-placeholder{
			font-size: 24rpx;
			color: #BFBFBF;
		}
	}
</style>
